<template>
	<view>
		<view class="index-top radius">
			<view class="flex justify-center font-white order-count">
				<view class="padding-sm  radius">{{affiliateUser.totalCommission}}</view>
				<view class="padding-sm order-split margin-top-xs">|</view>
				<view class="padding-sm  radius">{{affiliateUser.availableCommission}}</view>
			</view>
			<view class="flex justify-center font-white order-count-text">
				<view class=" padding-sm-right radius">累计佣金(元)</view>
				<view style="width: 30upx;"></view>
				<view class=" padding-sm-left  radius">可提现(元)</view>
			</view>
		</view>
		<view class="my-top">
			<view class="my-service">
				<view class="service-list">
					<view class="list" @click="toPage('/pages/affiliate/affiliateUserView')">
						<view class="thumb">
							<image :src="addressPng"></image>
						</view>
						<view class="name">
							<text>申请分销</text>
						</view>
					</view>
					<view class="list" @click="toPage('/pages/affiliate/affiliate2UserView')">
						<view class="thumb">
							<image :src="kfrxPng"></image>
						</view>
						<view class="name">
							<text>增加二级分销员</text>
						</view>
					</view>
					<view class="list" @click="toPage('/pages/affiliate/affiliateCommission')">
						<view class="thumb">
							<image :src="pwdPng"></image>
						</view>
						<view class="name">
							<text>分销订单</text>
						</view>
					</view>
					<view class="list" @click="toPage('/pages/affiliate/affiliateEarnings')">
						<view class="thumb">
							<image :src="pwdPng"></image>
						</view>
						<view class="name">
							<text>分销收益</text>
						</view>
					</view>
					<view class="list" @click="toPage('/pages/affiliate/affiliateWithdrawalView')">
						<view class="thumb">
							<image :src="pwdPng"></image>
						</view>
						<view class="name">
							<text>提现申请</text>
						</view>
					</view>

					<view class="list" @click="toPage('/pages/affiliate/affiliateProduct')">
						<view class="thumb">
							<image :src="pwdPng"></image>
						</view>
						<view class="name">
							<text>商品分享</text>
						</view>
					</view>

				</view>
			</view>
			<!-- <view class="vip-info" @click="_toIntegral()">
				<view class="vip-explain">
					<text>累计佣金：{{affiliateUser.totalCommission}}元</text>
				</view>
				<view class="vip-explain">
					<text>可以提现：{{affiliateUser.availableCommission}}元</text>
				</view>
				<view class="vip-explain">
					<text>已提现：{{affiliateUser.withdrawnCommission}}元</text>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import conf from '@/conf/config.js'
	import {
		queryAffiliateUser
	} from "../../api/affiliate/affiliateApi";
	import mapping from "../../lib/java110/java110Mapping";

	export default {
		data() {
			return {
				personPng: conf.commonBaseUrl + 'h5/static/person.jpg',
				rankPng: conf.commonBaseUrl + 'h5/static/rank.png',
				addressPng: conf.commonBaseUrl + 'h5/static/images/user/icon-address.png',
				kfrxPng: conf.commonBaseUrl + 'h5/static/kfrx.png',
				pwdPng: conf.commonBaseUrl + 'h5/static/changePwd.png',
				payA: conf.commonBaseUrl + 'h5/static/order/order1.png',
				payB: conf.commonBaseUrl + 'h5/static/order/order3.png',
				payC: conf.commonBaseUrl + 'h5/static/order/order4.png',
				payD: conf.commonBaseUrl + 'h5/static/order/order2.png',
				payE: conf.commonBaseUrl + 'h5/static/order/order5.png',
				affiliateUser: {
					totalCommission: 0,
					availableCommission: 0,
					withdrawnCommission: 0,
				},
				conf: conf
			}
		},
		async onLoad(options) {

			await this.vc.onLoad(options).then(_suc => {}, _err => {});
			this._load();
		},
		methods: {
			async _load() {
				let param = {
					page: 1,
					row: 20,
					addType: 1
				};
				try {
					const data = await queryAffiliateUser(param);
					this.affiliateUser = data.data[0];
					wx.setStorageSync(mapping.AFFILIATE_USER, this.affiliateUser);
				} catch (error) {
					console.error('获取分销用户数据出错:', error);
				}
			},
			toPage: function(_url) {
				uni.navigateTo({
					url: _url
				})
			}
		}
	}
</script>

<style lang="scss">
	.index-top {
		background-color: #60A2F6;
		height: 320upx;
	}
	.index-menu-top {
		height: 36upx;
	}
	.font-white {
		color: #FFF;
	}
	
	.order-count {
		padding-top:80upx;
		font-size: 48upx;
	}
	
	.order-split {
		font-size: 48upx;
		line-height: 48upx;
		color: #FFF;
	}
	
	.order-count-text {
		margin-top: 5upx;
		font-size: 28upx;
	}
	.my-service {
		width: 94%;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx auto;

		.service-list {
			display: flex;
			flex-wrap: wrap;
			padding: 4% 4%;

			.list {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 25%;
				height: 120rpx;

				.thumb {
					width: 40rpx;
					height: 40rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.name {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 60rpx;

					text {
						color: #212121;
						font-size: 24rpx;
					}
				}
			}
		}
		
	}
	
</style>